<template>
    <div>
        <el-card>
            <div class="baseCss">
                <span>查询条件</span>
                <!-- <el-form :model="form" ref="ruleForm" style="width: 100%">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-form-item label="项目名称">
                                <el-select
                                    style="width: 100%"
                                    placeholder="请选择项目"
                                    v-model="projectName"
                                    @change="handleSelectProject"
                                >
                                    <el-option
                                        v-for="(project, idx) in projectList"
                                        :key="idx"
                                        :label="project.project_name_"
                                        :value="project"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" size="mini" @click="getData">查询</el-button>
                        </el-col>
                    </el-row>
                </el-form> -->
            </div>
            <div class="baseCss">
                <el-button type="primary" size="mini">查询</el-button>
            </div>
        </el-card>
        <el-card>
            <el-table :data="tableData" border v-loading="loading">
                <el-table-column type="index" label="序号" width="50" align="center" />
                <el-table-column label="项目编号" prop="projectNo" align="center"></el-table-column>
                <el-table-column label="项目名称" prop="projectName" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleToBlockDiagram(scope.$index, scope.row)"
                        >框图展示</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right; margin-top: 1rem">
                <el-pagination
                    background
                    small
                    layout="total, sizes, prev, pager, next"
                    @size-change="pageSizeChange"
                    @current-change="pageChange"
                    :current-page.sync="page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size.sync="pagesize"
                    :total="total"
                ></el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            total: 0,
            tableData: [],
            page: 1,
            pagesize: 10,
            loading: false,
        }
    },
    created() {
        this.getData()
    },
    methods: {
        // 页码变更
        pageChange(val) {
            this.page = val;
            this.getData();
        },
        // 条目变更
        pageSizeChange(val) {
            this.pagesize = val;
            this.getData();
        },
        getData() {
            this.loading = true
            let param = { curPage: this.page, pageSize: this.pagesize, params: { queryData: [{ name: "projectName", con: "like", val: this.projectNo }] } }
            this.$axios.post('/form/formCustSql/view/list_ppcgLoiProjectVo', param).then(res => {
                if (res.isOk) {
                    this.loading = false
                    this.tableData = res.data.list
                    this.total = res.data.count
                    this.$ElMessage({
                        message: '查询成功',
                        type: 'success',
                    })
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        handleToBlockDiagram(index, row) {
            this.$router.push({ path: `/blockDiagram&${row.projectNo}&${row.projectName}&采购系统` })
        },
    },
}
</script>

<style>
.baseCss {
    text-align: left;
    margin-bottom: 1rem;
}
</style>